.page {
  color: #ffffff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 32px;
  height: 32px;
}

.badge {
  font-size: 16px;
  padding: 2px 8px;
  border-radius: 16px;
  background-color: #333;
  font-weight: bold;
}

.badge-btn {
  padding: 8px 0;
}

.vertical-separator {
  height: 1px;
  width: 100%;
  background-color: rgba(255,255,255,0.5)
}

.horizontal-separator {
  width: 1px;
  height: 100%;
  background-color: rgba(255,255,255,0.5)
}

.topbar {
  width: 100%;
  align-items: center;
}

.topbar-btn {
  padding: 16px 32px;
}

.title {
  flex-grow: 1;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.info {
  font-size: 16px;
  font-weight: bold;
}

.ellipsis {
  lines: 1;
  text-overflow: ellipsis;
  text-align: left;
}

.body {
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
}

.body-swiper {
  width: 100%;
  flex-grow: 1;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.body-holder {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: grey;
}

.body-container {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-direction: column;
  padding: 24px;
  padding-top: 0;
}

.tabbar {
  width: 100%;
  padding: 16px 24px;
}

.tab {
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

.btn-group-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.card {
  padding: 12px 12px;
  border-radius: 8px;
  background-color: #161616;
  align-items: center;
  margin-bottom: 8px;
}

.card-btn-text {
  margin-left: 12px;
  font-size: 20px;
}

.card-btn-secondary {
  color: grey;
  font-size: 16px;
}

.choose-container {
  width: 100%;
  margin-top: 8px;
}

.choose-item {
  padding: 4px;
  font-size: 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
  background-color: transparent;
  color: white;
}

.choose-item-active {
  background-color: white;
  color: black;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 336px;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  flex-direction: column;
  margin-left: 336px;
}

.cover-animation-helper {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  margin-left: -336px;
}

.book-name {
  font-size: 24px;
  font-weight: bold;
}

.book-progress, .book-update, .book-hint {
  font-size: 24px;
  color: #999;
}

.book-cover {
  width: 64px;
  height: 96px;
  border-radius: 8px;
  margin-right: 8px;
}

.progress {
  color: white;
  layer-color: grey;
  stroke-width: 8px;
}

@keyframes In {
  100% {
    transform: translateX(-336px);
  }

  0% {
    transform: translateX(0%);
  }
}

.animation-in {
  animation-name: In;
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-delay: 50ms;
  margin-left: 336px;
}

@keyframes Out {
  100% {
    transform: translateX(-100%);
    /* opacity: 1; */
  }

  0% {
    transform: translateX(0%);
    /* opacity: 0; */
  }
}

.animation-out {
  animation-name: Out;
  animation-duration: 200ms;
  animation-timing-function: ease-in;
  animation-delay: 50ms;
  margin-left: 0;
}

@keyframes InBack {
  100% {
    transform: translateX(336px);
    /* opacity: 1; */
  }

  0% {
    transform: translateX(0%);
    /* opacity: 0; */
  }
}

.animation-in-back {
  animation-name: InBack;
  animation-duration: 200ms;
  animation-delay: 50ms;
  animation-timing-function: ease-out;
  margin-left: -336px;
}

@keyframes OutBack {
  100% {
    transform: translateX(100%);
    /* opacity: 1; */
  }

  0% {
    transform: translateX(0%);
    /* opacity: 0; */
  }
}

.animation-out-back {
  animation-name: OutBack;
  animation-duration: 200ms;
  animation-delay: 50ms;
  animation-timing-function: ease-in;
  margin-left: 0;
}

/* style reset classes */
.col {
  flex-direction: column;
}

.start {
  align-items: flex-start;
}

.center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.grow {
  flex-grow: 1;
}

.no-grow {
  flex-grow: 0;
}

.no-shrink, image, .badge {
  flex-shrink: 0;
}

.transparent {
  background-color: transparent;
}

.none {
  display: none;
}

/* margin and padding classes */

.ma-xl {
  margin: 48px;
}

.ma-lg {
  margin: 32px;
}

.ma-md {
  margin: 24px;
}

.ma-sm {
  margin: 12px;
}

.ma-xs {
  margin: 8px;
}

.ma-0 {
  margin: 0;
}

.mx-xl {
  margin-left: 48px;
  margin-right: 48px;
}

.mx-lg {
  margin-left: 32px;
  margin-right: 32px;
}

.mx-md {
  margin-left: 24px;
  margin-right: 24px;
}

.mx-sm {
  margin-left: 12px;
  margin-right: 12px;
}

.mx-xs {
  margin-left: 8px;
  margin-right: 8px;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-xl {
  margin-top: 48px;
  margin-bottom: 48px;
}

.my-lg {
  margin-top: 32px;
  margin-bottom: 32px;
}

.my-md {
  margin-top: 24px;
  margin-bottom: 24px;
}

.my-sm {
  margin-top: 12px;
  margin-bottom: 12px;
}

.my-xs {
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mt-xl {
  margin-top: 48px;
}

.mt-lg {
  margin-top: 32px;
}

.mt-md {
  margin-top: 24px;
}

.mt-sm {
  margin-top: 12px;
}

.mt-xs {
  margin-top: 8px;
}

.mt-0 {
  margin-top: 0;
}

.mb-xl {
  margin-bottom: 48px;
}

.mb-lg {
  margin-bottom: 32px;
}

.mb-md {
  margin-bottom: 24px;
}

.mb-sm {
  margin-bottom: 12px;
}

.mb-xs {
  margin-bottom: 8px;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-xl {
  margin-left: 48px;
}

.ml-lg {
  margin-left: 32px;
}

.ml-md {
  margin-left: 24px;
}

.ml-sm {
  margin-left: 12px;
}

.ml-xs {
  margin-left: 8px;
}

.ml-0 {
  margin-left: 0;
}

.mr-xl {
  margin-right: 48px;
}

.mr-lg {
  margin-right: 32px;
}

.mr-md {
  margin-right: 24px;
}

.mr-sm {
  margin-right: 12px;
}

.mr-xs {
  margin-right: 8px;
}

.mr-0 {
  margin-right: 0;
}

.pa-xl {
  padding: 48px;
}

.pa-lg {
  padding: 32px;
}

.pa-md {
  padding: 24px;
}

.pa-sm {
  padding: 12px;
}

.pa-xs {
  padding: 8px;
}

.pa-0 {
  padding: 0;
}

.px-xl {
  padding-left: 48px;
  padding-right: 48px;
}

.px-lg {
  padding-left: 32px;
  padding-right: 32px;
}

.px-md {
  padding-left: 24px;
  padding-right: 24px;
}

.px-sm {
  padding-left: 12px;
  padding-right: 12px;
}

.px-xs {
  padding-left: 8px;
  padding-right: 8px;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-xl {
  padding-top: 48px;
  padding-bottom: 48px;
}

.py-lg {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-md {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-sm {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-xs {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pt-xl {
  padding-top: 48px;
}

.pt-lg {
  padding-top: 32px;
}

.pt-md {
  padding-top: 24px;
}

.pt-sm {
  padding-top: 12px;
}

.pt-xs {
  padding-top: 8px;
}

.pt-0 {
  padding-top: 0;
}

.pb-xl {
  padding-bottom: 48px;
}

.pb-lg {
  padding-bottom: 32px;
}

.pb-md {
  padding-bottom: 24px;
}

.pb-sm {
  padding-bottom: 12px;
}

.pb-xs {
  padding-bottom: 8px;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-lg {
  padding-left: 48px;
}

.pl-md {
  padding-left: 24px;
}

.pl-sm {
  padding-left: 12px;
}

.pl-xs {
  padding-left: 8px;
}

.pl-0 {
  padding-left: 0;
}

.pr-xl {
  padding-right: 48px;
}

.pr-lg {
  padding-right: 32px;
}

.pr-md {
  padding-right: 24px;
}

.pr-sm {
  padding-right: 12px;
}

.pr-xs {
  padding-right: 8px;
}

.pr-0 {
  padding-right: 0;
}

/* height classes */

.h-100 {
  height: 100%;
}

.h-xl {
  height: 48px;
}

.h-lg {
  height: 32px;
}

.h-md {
  height: 24px;
}

.h-sm {
  height: 12px;
}

.h-xs {
  height: 8px;
}

.h-0 {
  height: 0;
}

/* width classes */

.w-100 {
  width: 100%;
}

.w-xl {
  width: 48px;
}

.w-lg {
  width: 32px;
}

.w-md {
  width: 24px;
}

.w-sm {
  width: 12px;
}

.w-xs {
  width: 8px;
}

.w-0 {
  width: 0;
}
